<!DOCTYPE html>
<html lang="zh-CN">

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no" />
		<title></title>
		<link rel="stylesheet" href="../css/bootstrap.css" />
		<style>
			#page span{
				line-height: 40px;
			}
		</style>
	</head>

	<body>
		<div class="container-fluid">
			<div class="row mt-1">
				<div class="col-sm-1">
					<button class="btn btn-primary btn-sm" id="getlist">添加</button>
				</div>
				<div class="col-sm-1 offset-10">
					<select id="size" name="size" class="form-control form-control-sm">
						<option value="10">10</option>
						<option value="15">15</option>
						<option value="20">20</option>
						<option value="25">25</option>
						<option value="30">30</option>
					</select>
				</div>
			</div>
			<table class="table table-bordered mt-2 small text-center">
				<thead>
					<tr>
						<th>编号</th>
						<th>手机号码</th>
						<th>密码</th>
						<th>账号状态</th>
						<th>后台权限</th>
						<th>操作</th>
					</tr>
				</thead>
				<tbody id="list"></tbody>
			</table>
			<ul class="pagination justify-content-center" id="page"></ul>
		</div>
		<!--弹出框-->
		<div class="modal fade" id="myModal">
			<div class="modal-dialog">
				<div class="modal-content">
					<div class="modal-header">
						<div class="modal-title" id="modalTitle">添加</div>
					</div>
					<div class="modal-body">
						<form id="myForm"></form>
					</div>
					<div class="modal-footer">
						<input type="hidden" id="formType" value="">
						<button type="button" class="btn btn-primary btn-sm" id="submit">提交</button>
						<button type="button" class="btn btn-secondary btn-sm" data-dismiss="modal">关闭</button>
					</div>
				</div>
			</div>
		</div>

		<script id="tpl_list" type="text/html">
			<tr>
				<td>{{uid}}</td>
				<td>
					<a href="javascript:;" onclick="">{{phone}}</a>
				</td>
				<td>{{pwd}}</td>
				<td>
					{{if user_state == 0}}正常{{/if}} {{if user_state == -1}}锁定{{/if}}{{if user_state == -2}}禁用{{/if}}
				</td>
				<td>
					{{if admin == 1}}有{{/if}} {{if admin == 0}}无{{/if}}
				</td>
				<td>
					<a class="btn btn-primary btn-sm" href='javascript:;' onclick='idUpdate({{uid}})'>编辑</a>
					<a class="btn btn-danger btn-sm" href='javascript:;' onclick='idDelete({{uid}})'>删除</a>
				</td>
			</tr>
		</script>

		<script id="tpl_form" type="text/html">
			<div class="form-group">
				<label class="col-sm-3 text-right">电话</label>
				<input type="text" class="col-sm-8 form-control-sm w-100" name="phone" value="{{phone}}" placeholder="电话号码" />
			</div>
			<div class="form-group">
				<label class="col-sm-3 text-right">密码</label>
				<input type="text" class="col-sm-8 form-control-sm w-100" name="pwd" value="{{pwd}}" placeholder="用户密码" />
			</div>
			<div class="form-group">
				<label class="col-sm-3 text-right">账号状态</label>
				<input type="radio" name="user_state" value="0" {{if user_state=="0" }}checked="checked" {{/if}} />&nbsp;正常
				<input type="radio" name="user_state" value="-1" {{if user_state=="-1" }}checked="checked" {{/if}} />&nbsp;锁定
				<input type="radio" name="user_state" value="-2" {{if user_state=="-2" }}checked="checked" {{/if}} />&nbsp;禁用
			</div>
			<div class="form-group">
				<label class="col-sm-3 text-right">后台权限</label>
				<input type="radio" name="admin" value="1" {{if admin=="1" }}checked="checked" {{/if}} />&nbsp;有
				<input type="radio" name="admin" value="0" {{if admin=="0" }}checked="checked" {{/if}} />&nbsp;无
			</div>
			<input type="hidden" class="col-sm-8 form-control-sm w-100" name="uid" value="{{uid}}" />
		</script>

		<script type="text/javascript" src="../js/jquery-3.3.1.js"></script>
		<script type="text/javascript" src="../js/bootstrap.min.js"></script>
		<script type="text/javascript" src="../js/popper.min.js"></script>
		<script type="text/javascript" src="../js/ajax.js"></script>
		<script type="text/javascript" src="../js/template-web.js"></script>
		<script>
			var obj, page = 1,
				size = 10,
				page_num = 0,
				formType;
			//页面加载时执行
			$(function() {
				getlist();
				page_list();
			})
			//获取列表
			function getlist() {
				size = $("#size").val();
				obj = {
					page: page,
					size: size
				}
				ajaxGet("/user/list",false, obj, function(data) {
					var str = "";
					console.log(data.count)
					for(var key in data.data) {
						str += template("tpl_list", data.data[key]);
					}
					$("#list").empty().append(str);
					//分页器
					page_num = Math.ceil(data.count / size);
				})
			}
			
			//插入分页器
			function page_list(){
				var str = `<li class="page-item disabled" id="page_up_li">`;
				str += `<a href="#" class="page-link" onclick="page_up()">上一页</a></li>`;
				for(var i = 1; i <= page_num; i++) {
					str += `<li class="page-item">`;
					str += `<a href="#" class="page-link">${i}</a></li>`;
				}
				str += `<li class="page-item" id="page_down_li">`;
				str += `<a href="#" class="page-link" onclick="page_down()">下一页</a></li>`;
				str += `<span id="current" class="ml-3">当前第${page}页</span><span class="ml-3">共${page_num}页</span>`
				$("#page").empty().append(str);
			}

			//点击上一页
			function page_up() {
				var down = $("#page_down_li").hasClass("disabled");
				if(down == true) {
					$("#page_down_li").removeClass("disabled");
				}
				page -= 1;
				getlist();
				$("#current").empty().append(`当前第${page}页`);
				if(page == 1) {
					$("#page_up_li").addClass("disabled");
				}
			}

			//点击下一页
			function page_down() {
				var up = $("#page_up_li").hasClass("disabled");
				if(up) {
					$("#page_up_li").removeClass("disabled");
				}
				page += 1;
				getlist();
				$("#current").empty().append(`当前第${page}页`);
				if(page == page_num) {
					$("#page_down_li").addClass("disabled");
				}
			}

			//改变每页数据数量
			$("#size").click(function() {
				getlist();
			})
			//点击添加按钮
			$("#getlist").click(function() {
				$("#myModal").modal("show");
				$("#myForm").empty().append(template("tpl_form", ""));
				$("#formType").val("add");
			})

			//编辑
			function idUpdate(uid) {
				$.ajax({
					type: "GET",
					url: "/user/details",
					data: {
						uid: uid
					},
					dataType: "JSON",
					success: function(data) {
						$("#myModal").modal("show");
						$("#myForm").empty().append(template("tpl_form", data[0]));
						$("#formType").val("edit");
						$("#modalTitle").html("修改编号 " + uid + " 的信息");
					}
				})
			}
			//点击提交按钮
			$("#submit").click(function() {
				var parm = $("#myForm").serialize();
				formType = $("#formType").val();
				console.log(parm);
				console.log(formType);
				//提交方法为添加时
				if(formType == "add") {
					ajaxPost("/user/add", parm, function(data) {
						if(data.code == 200) {
							alert(data.msg);
							$("#myModal").modal("hide");
							getlist();
						} else {
							alert(data.msg);
						}
					})
				}
				//提交方法为编辑时
				if(formType == "edit") {
					ajaxPost("/user/update", parm, function(data) {
						if(data.code == 200) {
							alert(data.msg);
							$("#myModal").modal("hide");
							getlist();
						} else {
							alert(data.msg);
						}
					})
				}
			})
			//删除
			function idDelete(uid) {
				$.ajax({
					type: "GET",
					url: "/user/delete",
					data: {
						uid: uid
					},
					dataType: "JSON",
					success: function(data) {
						alert(data.msg);
						getlist();
					}
				})
			}
		</script>
	</body>

</html>